<template>
  <!-- 属性修改对话框 -->
  <el-dialog :title="_title" :visible.sync="visible" width="680px" :before-close="beforeClose" append-to-body>
    <el-form ref="form" :model="model" label-width="160px">
      <el-form-item label="类型" prop="name">
        <el-select v-model="model.name" placeholder="请选择类型" @change="annotationNameChanged">
          <el-option v-for="(value, key) in formOptions.name" :key="key" :label="value" :value="key" />
        </el-select>
      </el-form-item>

      <template v-if="model.type == '3d'">
        <template v-for="i in 8">
          <el-form-item
            v-if="formOptions['a' + i + '_3d']"
            :label="formOptions['a' + i + '_3d_description']"
            :prop="'a' + i"
            :key="'a' + i"
          >
            <el-input
              v-if="i == 1 && model.type == '3d' && formOptions.a1_3d_description"
              v-model="model.a1"
              :placeholder="'请选择' + formOptions.a1_3d_description"
              size="mini"
            />
            <el-select
              v-if="i != 1 && model.type == '3d' && formOptions['a' + i + '_3d_description']"
              v-model="model['a' + i]"
              :placeholder="'请选择' + formOptions['a' + i + '_3d_description']"
            >
              <el-option v-for="(value, key) in formOptions['a' + i + '_3d']" :key="key" :label="value" :value="key" />
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="formOptions['b' + i + '_3d']"
            :label="formOptions['b' + i + '_3d_description']"
            :prop="'b' + i"
            :key="'b' + i"
          >
            <el-select
              v-if="model.type == '3d' && formOptions['b' + i + '_3d_description']"
              v-model="model['b' + i]"
              :placeholder="'请选择' + formOptions['b' + i + '_3d_description']"
            >
              <el-option v-for="(value, key) in formOptions['b' + i + '_3d']" :key="key" :label="value" :value="key" />
            </el-select>
          </el-form-item>
        </template>
      </template>

      <template v-if="model.type == '2d'">
        <template v-for="i in 8">
          <el-form-item
            v-if="formOptions['a' + i + '_2d']"
            :label="formOptions['a' + i + '_2d_description']"
            :prop="'a' + i"
            :key="'a' + i"
          >
            <el-input
              v-if="i == 1 && model.type == '2d' && formOptions.a1_2d_description"
              v-model="model.a1"
              :placeholder="'请选择' + formOptions.a1_2d_description"
              size="mini"
            />
            <el-select
              v-if="i != 1 && model.type == '2d' && formOptions['a' + i + '_2d_description']"
              v-model="model['a' + i]"
              :placeholder="'请选择' + formOptions['a' + i + '_2d_description']"
            >
              <el-option v-for="(value, key) in formOptions['a' + i + '_2d']" :key="key" :label="value" :value="key" />
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="formOptions['b' + i + '_2d']"
            :label="formOptions['b' + i + '_2d_description']"
            :prop="'b' + i"
            :key="'b' + i"
          >
            <el-select
              v-if="model.type == '2d' && formOptions['b' + i + '_2d_description']"
              v-model="model['b' + i]"
              :placeholder="'请选择' + formOptions['b' + i + '_2d_description']"
            >
              <el-option v-for="(value, key) in formOptions['b' + i + '_2d']" :key="key" :label="value" :value="key" />
            </el-select>
          </el-form-item>
        </template>
      </template>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleOk">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ActionStat } from './../components/MImageMarker/data/annotation'

export default {
  name: 'PropertyDialog',
  props: {
    title: { type: String, default: '属性' },

    /**
     * attributeNames
     * key:        labelName, labelAttributes
     * optionKey:  a{i}_2d, b{i}_2d, a{i}_2d_description, b{i}_2d_description
     *        or:  a{i}_3d, b{i}_3d, a{i}_3d_description, b{i}_3d_description
     *  addition:  {className}_a{i}_2d|3d
     */
    attributeNames: {
      type: [Object, Array],
      default: () => ({}),
    },
  },

  computed: {
    _title() {
      return this.options.title || this.title
    },
  },

  data() {
    return {
      visible: false,

      // selectedObject
      model: {},

      // formOptions
      formOptions: {},

      options: {},
    }
  },
  created() {},
  watch: {
    attributeNames: {
      immediate: true,
      handler() {
        this.formOptionsInit()
      },
    },
  },
  methods: {
    open(annotation, options = {}, callback) {
      // console.log(annotation, options)
      this._source = annotation
      this.options = { ...this.options, ...options }
      this.model = { ...annotation }
      this.visible = true
      this._callback = callback
    },

    annotationNameChanged(value) {
      // 是否存在个性化配置
      let customizedAttr = this.selectDictLabel(this.attributeNames, value + '_a1_2d')
      console.log(`Check custom config: '${value}_a1_2d, get value:'${customizedAttr}'`)

      if (!customizedAttr) return
      this.formOptionsInit(value)
    },

    // submitUpdateForm() {
    handleOk() {
      // TODO: form validate
      const annotation = this._source
      const status = annotation.status || ActionStat.UPDATE
      Object.assign(annotation, this.model, { status })
      this.resetUpdateForm()

      // console.log('Submit annotation:', annotation)
      this.$emit('submit', annotation)
      const callback = this._callback
      callback && callback(annotation)
    },

    // cancelUpdateForm() {
    handleCancel() {
      this.resetUpdateForm()
      this.$emit('cancel', null)

      const callback = this._callback
      callback && callback(false)
    },

    beforeClose(done) {
      done()
      this.handleCancel()
    },

    formOptionsInit(prefix = '') {
      if (
        (this.attributeNames instanceof Object && Object.keys(this.attributeNames).length === 0) ||
        (this.attributeNames instanceof Array && this.attributeNames.length === 0)
      ) {
        return
      }
      console.log(this.attributeNames)

      try {
        if (!prefix) {
          this.formOptions.name = JSON.parse(this.selectDictLabel(this.attributeNames, prefix + 'labelName')).values
          this.formOptions.attributes = JSON.parse(this.selectDictLabel(this.attributeNames, 'labelAttributes')).values
        }
      } catch (err) {
        console.error(`[PropertityDialog]`, err)
      }

      let customizedAttr = this.selectDictLabel(this.attributeNames, prefix + '_a1_2d')

      // 2d,3d
      for (let j = 2; j <= 3; j++) {
        // a{i}_2d, a{i}_3d, a{i}_2d_description, a{i}_3d_description
        for (let i = 1; i <= 8; i++) {
          const key = prefix + 'a' + i + '_' + j + 'd'
          const tmp = this.selectDictLabel(this.attributeNames, key)
          if (tmp) {
            try {
              this.formOptions['a' + i + '_' + j + 'd'] = JSON.parse(tmp).values
              this.formOptions['a' + i + '_' + j + 'd_description'] = JSON.parse(tmp).typeDesc
            } catch (err) {
              console.error(`{key:${key},val: '${tmp}'}`, err)
            }
          } else if (customizedAttr) {
            this.formOptions['a' + i + '_' + j + 'd'] = null
            this.formOptions['a' + i + '_' + j + 'd_description'] = null
          }
        }

        // b{i}_2d, b{i}_3d, b{i}_2d_description, b{i}_3d_description
        for (let i = 1; i <= 8; i++) {
          const key = prefix + 'b' + i + '_' + j + 'd'
          const tmp = this.selectDictLabel(this.attributeNames, key)
          if (tmp) {
            try {
              this.formOptions['b' + i + '_' + j + 'd'] = JSON.parse(tmp).values
              this.formOptions['b' + i + '_' + j + 'd_description'] = JSON.parse(tmp).typeDesc
            } catch (err) {
              console.error(`{key:${key},val: '${tmp}'}`, err)
            }
          } else if (customizedAttr) {
            this.formOptions['b' + i + '_' + j + 'd'] = null
            this.formOptions['b' + i + '_' + j + 'd_description'] = null
          }
        }
      }

      console.log(this.formOptions)
    },

    resetUpdateForm() {
      this.visible = false
      // this.model = { }
      this.resetForm('form')
    },
  },
}
</script>

<style></style>
